<template>
	<view class="content">
		<u-tabs-swiper active-color='#FF8710' @change="tabsChange" :current="current" ref="tabs" :list="list"
			:is-scroll="false">
		</u-tabs-swiper>

		<!-- 待付款 -->
		<scroll-view scroll-y="true" v-show="show[0]">
			<view v-for="(item,index) in toBePaid" class="item"
				@click="$to(`../order-detail/order-detail?list=${JSON.stringify(item)}`)">
				<view class="f-c-b">
					<view @click="$to(`../shop/shop?title=${item.storeName}`)" class="f30">{{item.storeName}}</view>
					<view class="f25" @click.stop="showFlag1=true">
						<u-icon name="close-circle"></u-icon>
						取消订单
					</view>
				</view>
				<view class="" v-for="(item2,index2) in item.dataList">
					<view class="item-item2">
						<view class="f-c-c">
							<view class="">
								<image :src="item2.url" mode="widthFix"></image>
							</view>
							<view class="item-item2-right">
								<view>{{item2.title}}</view>
								<view class="c6 price_num">
									<view class="price">
										<text class="f40">￥{{item2.price.split('.')[0]}}.</text>
										<text>{{item2.price.split('.')[1]}}</text>
									</view>
									<view class="">×{{item2.num}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom f-c-b">
					<view class="bottom-left">
						<text>合计：</text>
						<text class="f35 bottom-left-price fw">￥{{priceAll(item)}}</text>
					</view>
					<view class="bottom-right f-c-c f25">
						<view class="bottom-right-btn1 f-c-c">联系商家</view>
						<view class="bottom-right-btn2 f-c-c cw">付款</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 已付款 -->
		<scroll-view scroll-y="true" v-show="show[1]">
			<view v-for="(item,index) in toBePaid" class="item"
				@click="$to(`../order-detail/order-detail?list=${JSON.stringify(item)}`)">
				<view class="f-c-b">
					<view class="f30">{{item.storeName}}</view>
				</view>
				<view class="" v-for="(item2,index2) in item.dataList">
					<view class="item-item2">
						<view class="f-c-c">
							<view class="">
								<image :src="item2.url" mode="widthFix"></image>
							</view>
							<view class="item-item2-right">
								<view>{{item2.title}}</view>
								<view class="c6 price_num f-c-b">
									<view class="price">
										<text class="f40">￥{{item2.price.split('.')[0]}}.</text>
										<text>{{item2.price.split('.')[1]}}</text>
									</view>
									<view class="">×{{item2.num}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom f-c-b">
					<view class="bottom-left">
						<text>合计：</text>
						<text class="f35 bottom-left-price fw">￥{{priceAll(item)}}</text>
					</view>
					<view class="bottom-right f-c-c f25">
						<view class="bottom-right-btn2 f-c-c cw">联系商家</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 待收货 -->
		<scroll-view scroll-y="true" v-show="show[2]">
			<view v-for="(item,index) in toBePaid" class="item"
				@click="$to(`../order-detail/order-detail?list=${JSON.stringify(item)}`)">
				<view class="f-c-b">
					<view class="f30">{{item.storeName}}</view>
					<view class="f-c-c f25 c6">
						<view>查看物流</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="" v-for="(item2,index2) in item.dataList">
					<view class="item-item2">
						<view class="f-c-c">
							<view class="">
								<image :src="item2.url" mode="widthFix"></image>
							</view>
							<view class="item-item2-right">
								<view>{{item2.title}}</view>
								<view class="c6 price_num f-c-b">
									<view class="price">
										<text class="f40">￥{{item2.price.split('.')[0]}}.</text>
										<text>{{item2.price.split('.')[1]}}</text>
									</view>
									<view class="">×{{item2.num}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom f-c-b">
					<view class="bottom-left">
						<text>合计：</text>
						<text class="f35 bottom-left-price fw">￥{{priceAll(item)}}</text>
					</view>
					<view class="bottom-right f-c-c f25">
						<view class="bottom-right-btn1 f-c-c">联系商家</view>
						<view class="bottom-right-btn2 f-c-c cw">确认收货</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 已签收 -->
		<scroll-view scroll-y="true" v-show="show[3]">
			<view v-for="(item,index) in toBePaid" class="item"
				@click="$to(`../order-detail/order-detail?list=${JSON.stringify(item)}`)">
				<view class="f-c-b">
					<view class="f30">{{item.storeName}}</view>
					<view class="f25 f-c-c" @click.stop="showFlag2=true">
						<image style="width: 30rpx;" src="../../static/my/icon_del.png" mode="widthFix"></image>
						删除订单
					</view>
				</view>
				<view class="" v-for="(item2,index2) in item.dataList">
					<view class="item-item2">
						<view class="f-c-c">
							<view class="">
								<image :src="item2.url" mode="widthFix"></image>
							</view>
							<view class="item-item2-right">
								<view>{{item2.title}}</view>
								<view class="c6 price_num">
									<view class="price">
										<text class="f40">￥{{item2.price.split('.')[0]}}.</text>
										<text>{{item2.price.split('.')[1]}}</text>
									</view>
									<view class="">×{{item2.num}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom f-c-b">
					<view class="bottom-left">
						<text>合计：</text>
						<text class="f35 bottom-left-price fw">￥{{priceAll(item)}}</text>
					</view>
					<view class="bottom-right f-c-c f25">
						<view class="bottom-right-btn1 f-c-c">联系商家</view>
						<view @click.stop="popFlag=true" class="bottom-right-btn2 f-c-c cw">退款</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 售后 -->
		<scroll-view scroll-y="true" v-show="show[4]">
			<view v-for="(item,index) in toBePaid" class="item"
				@click="$to(`../order-detail/order-detail?list=${JSON.stringify(item)}&type=1`)">
				<view class="f-c-b">
					<view class="f30">{{item.storeName}} <text style="margin-left: 20rpx;"
							class="f25 c6">{{item.status}}</text>
					</view>
					<view class="f25 f-c-c" v-show="item.status!='退货中'" @click.stop="showFlag3=true">
						<image style="width: 30rpx;" src="../../static/my/icon_del.png" mode="widthFix"></image>
						删除记录
					</view>
				</view>
				<view class="" v-for="(item2,index2) in item.dataList">
					<view class="item-item2">
						<view class="f-c-c">
							<view class="">
								<image :src="item2.url" mode="widthFix"></image>
							</view>
							<view class="item-item2-right">
								<view>{{item2.title}}</view>
								<view class="c6 price_num">
									<view class="price">
										<text class="f40">￥{{item2.price.split('.')[0]}}.</text>
										<text>{{item2.price.split('.')[1]}}</text>
									</view>
									<view class="">×{{item2.num}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom f-c-b">
					<view class="bottom-left">
						<text>合计：</text>
						<text class="f35 bottom-left-price fw">￥{{priceAll(item)}}</text>
					</view>
					<view class="bottom-right f-c-c f25">
						<view class="bottom-right-btn1 f-c-c" v-show="item.status=='退货失败'">联系商家</view>
						<view class="bottom-right-btn2 f-c-c cw" v-show="item.status=='退货失败'" @click.stop="toAgain">重新申请
						</view>
						<view class="bottom-right-btn2 f-c-c cw" v-show="item.status!='退货失败'">联系商家</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<u-modal confirm-color='#F57808' confirm-text='确认' width='550' v-model="showFlag1"
			:content="content1" :show-cancel-button='true' :content-style="{fontSize:'35rpx',color:'#464646',}">
		</u-modal>
		
		<u-modal confirm-color='#F57808' confirm-text='确认' width='550' v-model="showFlag2"
			:content="content2" :show-cancel-button='true' :content-style="{fontSize:'35rpx',color:'#464646',}">
		</u-modal>
		
		<u-modal confirm-color='#F57808' confirm-text='确认' width='550' v-model="showFlag3"
			:content="content3" :show-cancel-button='true' :content-style="{fontSize:'35rpx',color:'#464646',}">
		</u-modal>

		<u-popup v-model="popFlag" mode="center" border-radius="14" :closeable='true' width="390" height="510">
			<view>
				<view class="f40 f-c-c popTitle">{{popTitle}}</view>
				<view class="popTex">
					<textarea value="" placeholder="请输入退款原因" placeholder-class="plaCla" />
				</view>
				<view class="btn f-c-c cw">确认</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showFlag1: false,
				content1: '是否确认取消订单？',
				showFlag2: false,
				content2: '是否确认删除订单？',
				showFlag3: false,
				content3: '是否确认删除记录？',
				popFlag: false,
				popTitle: '退款原因',
				show: [true, false, false, false, false],
				list: [{
					name: '待付款'
				}, {
					name: '已付款'
				}, {
					name: '待收货'
				}, {
					name: '已签收'
				}, {
					name: '售后'
				}],
				current: 0,
				toBePaid: [{
					storeName: '喜羊羊店铺',
					status: '退货失败',
					dataList: [{
						url: '../../static/index/img_sp.png',
						title: '甩开油田清爽一夏·【美国版】持妆 DW粉底液...',
						price: '88.88',
						num: 12
					}]
				}, {
					storeName: '喜羊羊店铺',
					status: '退货中',
					dataList: [{
						url: '../../static/index/img_sp.png',
						title: '甩开油田清爽一夏·【美国版】持妆 DW粉底液...',
						price: '88.88',
						num: 12
					}]
				}, {
					storeName: '喜羊羊店铺',
					status: '退货成功',
					dataList: [{
						url: '../../static/index/img_sp.png',
						title: '甩开油田清爽一夏·【美国版】持妆 DW粉底液...',
						price: '88.88',
						num: 12
					}, {
						url: '../../static/index/img_sp.png',
						title: '甩开油田清爽一夏·【美国版】持妆 DW粉底液...',
						price: '88.88',
						num: 12
					}, {
						url: '../../static/index/img_sp.png',
						title: '甩开油田清爽一夏·【美国版】持妆 DW粉底液...',
						price: '88.88',
						num: 12
					}, {
						url: '../../static/index/img_sp.png',
						title: '甩开油田清爽一夏·【美国版】持妆 DW粉底液...',
						price: '88.88',
						num: 12
					}, {
						url: '../../static/index/img_sp.png',
						title: '甩开油田清爽一夏·【美国版】持妆 DW粉底液...',
						price: '88.88',
						num: 12
					}, {
						url: '../../static/index/img_sp.png',
						title: '甩开油田清爽一夏·【美国版】持妆 DW粉底液...',
						price: '88.88',
						num: 12
					}, {
						url: '../../static/index/img_sp.png',
						title: '甩开油田清爽一夏·【美国版】持妆 DW粉底液...',
						price: '88.88',
						num: 12
					}]
				}]
			}
		},
		methods: {
			tabsChange(index) {
				this.current = index;
				this.show = [false, false, false, false, false]
				this.show.forEach((item, i) => {
					if (i == index) {
						this.show[i] = true
						return
					}
				})
			},
			// toDel() {
			// 	this.content = '是否删除订单？'
			// 	this.showFlag = true
			// },
			// toDelAfter(){
			// 	this.content = '是否删除记录？'
			// 	this.showFlag = true
			// },
			toAgain() {
				this.popFlag = true,
					this.popTitle = "重新申请"
			},
		},
		computed: {
			priceAll() {
				return function(item) {
					let priceAll = 0;
					item.dataList.forEach(item => {
						priceAll += item.num * Number(item.price)
					})
					return priceAll.toFixed(2)
				}
			}
		}
	}
</script>

<style>
	.content {
		background-color: #F4F4F4;
		height: 100vh;
	}

	.item {
		background-color: #FFFFFF;
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.item-item2 {
		margin: 10rpx 0;
	}

	.item-item2-right {
		margin-left: 20rpx;
	}

	.item-item2 image {
		width: 160rpx;
	}

	.price_num {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}

	.price {
		margin-right: 50rpx;
	}

	.bottom {
		margin-top: 10rpx;
	}

	.bottom-left-price {
		color: #EF2A2A;
	}

	.bottom-right-btn1,
	.bottom-right-btn2 {
		width: 137rpx;
		height: 44rpx;
		border-radius: 30rpx;
	}

	.bottom-right-btn1 {
		border: 1rpx solid #FF8710;
		margin-right: 10rpx;
		color: #FF8710;
	}

	.bottom-right-btn2 {
		background-color: #FF8710;
	}

	.popTitle {
		margin: 20rpx;
	}

	.popTex {
		background-color: #F4F4F4;
		margin: 0 20rpx;
		padding: 10rpx;
	}

	.popTex textarea {
		width: 100%;
	}

	.plaCla {
		font-size: 30rpx;
		color: #999999;
	}

	.btn {
		background-color: #FF8710;
		margin: 20rpx;
		padding: 8rpx 0;
		border-radius: 10rpx;
	}
</style>
